window.onload = function () {
  // 一进到页面就发送Ajax请求获取所有学员信息
  function initFn() {
    // 发送Ajax请求
    axios({
      method: "get",
      url: "/student/list",
      // 自定义请求头
      // headers: { Authorization: localStorage.getItem("mytoken") },
    }).then((res) => {
      // console.log(res);
      //判断返回结果
      if (res.status == 200 && res.data.code == 0) {
        // 渲染数据
        fn(res.data.data.reverse());
      }
    });
  }
  initFn();
  // 根据数组数据渲染页面
  function fn(arr) {
    document.querySelector("tbody").innerHTML = arr
      .map((item) => {
        return `
            <tr>
              <th scope="row">${item.id}</th>
              <td>${item.name}</td>
              <td>${item.age}</td>
              <td>${item.sex}</td>
              <td>${item.group}</td>
              <td>${item.phone}</td>
              <td>${item.salary}</td>
              <td>${item.truesalary}</td>
              <td>${item.province + item.city + item.county}</td>
              <td>
              <button data-id="${
                item.id
              }" type="button" class="btn btn-primary btn-sm update" data-bs-toggle="modal" data-bs-target="#addModal">修改</button>
              <button data-id="${
                item.id
              }" type="button" class="btn btn-danger btn-sm del">删除</button>
              </td>
          </tr>
          `;
      })
      .join("");
  }
  // 获取元素
  let addModal = document.querySelector("#addModal"); //模态框
  let provinceSelect = addModal.querySelector('[name="province"]'); //省
  let citySelect = addModal.querySelector('[name="city"]'); //市
  let countySelect = addModal.querySelector('[name="county"]'); //县
  let id; //声明一个全局变量的学生id

  // 弹出模态框
  $("#addModal").on("show.bs.modal", function (e) {
    // 设置市跟县的默认值
    citySelect.innerHTML = `<option selected value="">--市--</option>`;
    countySelect.innerHTML = `<option selected value="">--县--</option>`;
    // 模态框弹出就发送Ajax请求获取省数据
    axios({
      url: "/geo/province",
    }).then((res) => {
      // 判断返回结果
      if (res.status == 200) {
        // console.log(res);
        let str = `<option selected value="">--省--</option>`;
        str += res.data
          .map((item) => {
            return `<option  value="${item}">${item}</option>`;
          })
          .join("");
        provinceSelect.innerHTML = str;
      }
    });
    // 当省改变时,在获取对应省的市数据
    // 添加省值改变事件
    provinceSelect.addEventListener("change", function () {
      citySelect.innerHTML = `<option selected value="">--市--</option>`;
      countySelect.innerHTML = `<option selected value="">--县--</option>`;
      if (this.value == "") {
        return;
      }
      // 发送Ajax请求,获取对应省份下的市区
      axios({
        url: "/geo/city",
        params: {
          // 省的名字就是当前下拉框选中的省份值
          pname: this.value,
        },
      }).then((res) => {
        //console.log(res);
        // 判断返回结果
        if (res.status == 200) {
          let str = `<option selected value="">--市--</option>`;
          str += res.data
            .map((item) => {
              return `<option  value="${item}">${item}</option>`;
            })
            .join("");
          citySelect.innerHTML = str;
        }
      });
    });
    // 当市改变时,在获取对应市的省数据
    // 添加市值改变事件
    citySelect.addEventListener("change", function () {
      countySelect.innerHTML = `<option selected value="">--县--</option>`;
      if (this.value == "") {
        return;
      }
      // 发送Ajax请求, 获取对应省份下的市区;
      axios({
        url: "/geo/county",
        // 传递参数
        params: {
          // 省的名字就是当前下拉框选中的省份值
          pname: provinceSelect.value,
          // 市的名字就是当前下拉框选中的市区值
          cname: citySelect.value,
        },
      }).then((res) => {
        //console.log(res);
        // 判断返回结果
        if (res.status == 200) {
          let str = `<option selected value="">--县--</option>`;
          str += res.data
            .map((item) => {
              return `<option  value="${item}">${item}</option>`;
            })
            .join("");
          countySelect.innerHTML = str;
        }
      });
    });

    // bootstrap查看事件源
    // console.log(e.relatedTarget);
    // 判断点击的内容弹出是添加学员还是修改学员
    if (e.relatedTarget.innerHTML.trim() == "添加学员") {
      // 获取元素
      document.querySelector("#addModalLabel").innerText = "录入新学员";
      document.querySelector("#queren").innerText = "确认添加";
      document.querySelector("#chongzhi").style.display = "inline-block";
    } else {
      // 获取元素
      document.querySelector("#addModalLabel").innerText = "修改学员信息";
      document.querySelector("#queren").innerText = "确认修改";
      document.querySelector("#chongzhi").style.display = "none";
      // 编辑功能 数据回填
      // 获取id
      id = e.relatedTarget.getAttribute("data-id");
      // 发送Ajax请求,获取学员信息
      axios({
        url: "/student/one",
        params: {
          id,
        },
      }).then((res) => {
        // 判断返回结果
        if (res.status == 200 && res.data.code == 0) {
          // 获取结果并保存
          let obj = res.data.data;
          // 获取元素
          addModal.querySelector('[name="name"]').value = obj.name; //名字
          addModal.querySelector('[name="age"]').value = obj.age; //年龄
          addModal.querySelector('[name="group"]').value = obj.group; //组
          addModal.querySelector('[name="phone"]').value = obj.phone; //手机号
          addModal.querySelector('[name="salary"]').value = obj.salary; //期望薪资
          addModal.querySelector('[name="truesalary"]').value = obj.truesalary; //实际薪资
          // 性别
          obj.sex == "男"
            ? (addModal.querySelectorAll('[name="sex"]')[0].checked = true)
            : (addModal.querySelectorAll('[name="sex"]')[1].checked = true);
          // 省
          provinceSelect.value = obj.province;
          citySelect.innerHTML = `<option selected value="${obj.city}">${obj.city}</option>`; //市
          countySelect.innerHTML = `<option selected value="${obj.county}">${obj.county}</option>`; //县
        }
      });
    }
  });

  // 隐藏模态框
  $("#addModal").on("hidden.bs.modal", function () {
    // 重置表单内容
    addModal.querySelector("form").reset();
  });
  // 添加学员的表单验证
  function student() {
    return {
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: "姓名不能为空",
            },
            stringLength: {
              min: 2,
              max: 10,
              message: "姓名长度2~10位",
            },
          },
        },
        age: {
          validators: {
            notEmpty: {
              message: "年龄不能为空",
            },
            greaterThan: {
              value: 18,
              message: "年龄不能小于18岁",
            },
            lessThan: {
              value: 60,
              message: "年龄不能超过60岁",
            },
          },
        },
        sex: {
          validators: {
            choice: {
              min: 1,
              max: 1,
              message: "请选择性别",
            },
          },
        },
        group: {
          validators: {
            notEmpty: {
              message: "组号不能为空",
            },
            regexp: {
              regexp: /^\d{1,2}$/,
              message: "请选择有效的组号",
            },
          },
        },
        phone: {
          validators: {
            notEmpty: {
              message: "手机号不能为空",
            },
            regexp: {
              regexp: /^1\d{10}$/,
              message: "请填写有效的手机号",
            },
          },
        },
        salary: {
          validators: {
            notEmpty: {
              message: "实际薪资不能为空",
            },
            greaterThan: {
              value: 800,
              message: "期望薪资不能低于800",
            },
            lessThan: {
              value: 100000,
              message: "期望薪资不能高于100000",
            },
          },
        },
        truesalary: {
          validators: {
            notEmpty: {
              message: "实际薪资不能为空",
            },
            greaterThan: {
              value: 800,
              message: "实际薪资不能低于800",
            },
            lessThan: {
              value: 100000,
              message: "实际薪资不能高于100000",
            },
          },
        },
        province: {
          validators: {
            notEmpty: {
              message: "省份必填",
            },
          },
        },
        city: {
          validators: {
            notEmpty: {
              message: "市必填",
            },
          },
        },
        county: {
          validators: {
            notEmpty: {
              message: "县必填",
            },
          },
        },
      },
    };
  }

  // 添加学生
  $(".add-form")
    .bootstrapValidator(student())
    .on("success.form.bv", function (e) {
      e.preventDefault();
      //判断是添加学员还是修改学员
      if (document.querySelector("#queren").innerText == "确认添加") {
        // 获取表单数据
        let fd = new FormData(document.querySelector(".add-form"));
        // 转成key,value结构
        let obj = {};
        // 遍历表单信息
        fd.forEach((v, k) => {
          obj[k] = v;
        });
        // 发送Ajax请求
        axios({
          method: "post",
          url: "/student/add",
          data: obj,
        }).then((res) => {
          // 判断返回的信息是否正确
          if (res.status == 200 && res.data.code == 0) {
            //console.log(res);
            // 提示信息
            toastr.success(res.data.message);
            // 隐藏模态框
            $("#addModal").modal("hide");
            // 根据新数据重新渲染页面
            initFn();
          }
        });
      } else {
        // 获取表单信息
        let fd = new FormData(document.querySelector(".add-form"));
        // 转成key,value结构
        let obj = {};
        //遍历表单信息
        fd.forEach((v, k) => {
          obj[k] = v;
        });
        obj.id = id;
        console.log(obj);
        // 发送Ajax请求
        axios({
          method: "put",
          url: "/student/update",
          data: obj,
        }).then((res) => {
          // 判断返回的信息是否正确
          if (res.status == 200 && res.data.code == 0) {
            //console.log(res);
            // 提示信息
            toastr.success(res.data.message);
            // 隐藏模态框
            $("#addModal").modal("hide");
            // 根据新数据重新渲染页面
            initFn();
          }
        });
      }
    });
  // 删除学员
  document.querySelector("tbody").onclick = function (e) {
    // 判断点击的是否是删除按钮
    if (e.target.classList.contains("del")) {
      // 获取当前学员的id
      let id = e.target.getAttribute("data-id");
      // 发送Ajax请求
      axios({
        method: "delete",
        url: "/student/delete",
        params: {
          id,
        },
      }).then((res) => {
        ///console.log(res);
        // 提示用户是否删除
        if (confirm(`确定要删除这位学员的信息吗`)) {
          // 判断返回结果
          if (res.status == 200 && res.data.code == 0) {
            // 提示用户
            toastr.success(res.data.message);
            // 重新渲染页面
            initFn();
          }
        }
      });
    }
  };
};
